import React from "react";
import { InputGroup } from "../component/input_item";
import * as gitdb from 'gitee-simple-db/src/index'
import _ from 'lodash';
import { BasicInfo } from "../operation/basic_info";

const saveKeyMapping = {
    "owner": "$OWNER",
    "repo": "$REPO",
    "access_token": "$ACCESS_TOKEN",
    "issue": "$DBISSUE",
}
const defaultSetting = {
    owner: 'lhhcherry',
    repo: 'password_pad',
    issue: 'sample_db',
}
export class InitialCard extends React.Component<any, any> {
    footer: { okLabel: string; };
    constructor(props) {
        super(props);
        let savedInfo = this.getSavedSetting();
        this.state = {
            owner: savedInfo.owner,
            repo: savedInfo.repo,
            access_token: savedInfo.access_token,
            issue: savedInfo.issue,
        }
        this.footer = {
            okLabel: "OK",
        }
    }
    valueSetter = (e) => {
        let {name, value} = e.target;
        this.setState({
            [name]: value
        })
    }
    finishInitialized = () => {
        if (this.props.initializedCallback) {
            this.props.initializedCallback();
        } else {
            throw Error("Not found initialized callback")
        }
    }
    getSavedSetting = (): any => {
        let keyArr = Object.keys(saveKeyMapping);
        let result: any = {};
        keyArr.forEach(key => {
            result[key] = window.localStorage.getItem(saveKeyMapping[key])
            if (_.isEmpty(result[key])) {
                result[key] = defaultSetting[key] ? defaultSetting[key] : ""
            }
        })
        return result;
    }
    saveSettings = () => {
        for (let key in saveKeyMapping) {
            if (_.isEmpty(this.state[key])) {
                throw Error("State Emplty:" + key)
            }
            window.localStorage.setItem(saveKeyMapping[key], this.state[key])
        }
    }

    executeSetting = () => {
        let {owner, repo, access_token} = this.state;
        if (_.isEmpty(owner) || _.isEmpty(repo) || _.isEmpty(access_token))  {
            return;
        }
        // 设置配置好的表名称
        BasicInfo.tableName = this.state.issue;

        gitdb.initial({owner, repo, access_token}).then(v => {
            console.log('initial over!')
            this.saveSettings();
            this.finishInitialized();
        }).catch(e => {
            console.error(e)
            alert(e.message)
        })
    }
    render() {
        return (
            <div className="initial-card-container">
                <InputGroup placeholder="用户名"name="owner" icon="user" value={this.state.owner} valueSetter={this.valueSetter} prepend="Owner" />
                <InputGroup placeholder="仓库名"name="repo" icon="signature" value={this.state.repo} valueSetter={this.valueSetter} prepend="Repo" />
                <InputGroup placeholder="数据库"name="issue" icon="database" value={this.state.issue} valueSetter={this.valueSetter} prepend="issue" />
                <InputGroup placeholder="授权码"name="access_token" icon="key" value={this.state.access_token} valueSetter={this.valueSetter} prepend="AccessToken" />
                <div className="d-flex justify-content-end">
                    <button className="btn btn-primary" onClick={this.executeSetting}>
                    <i className="fas fa-lock"></i> 打开笔记本 
                    </button>
                </div>
            </div>
        )
    }
}